<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<section>
    <h4>预防XSS</h4>
    <ul>
        <li>预防攻击者提交恶意代码</li>
        <li>预防浏览器执行恶意代码</li>
    </ul>
</section>
<script>
    // 漏洞总结
    // 在 HTML 中内嵌的文本中，恶意内容以 script 标签形成注入。
    // 在内联的 JavaScript 中，拼接的数据突破了原本的限制（字符串，变量，方法名等）。
    // 在标签属性中，恶意内容包含引号，从而突破属性值的限制，注入其他属性或者标签。
    // 在标签的 href、src 等属性中，包含 javascript: 等可执行代码。
    // 在 onload、onerror、onclick 等事件中，注入不受控制代码。
    // 在 style 属性和标签中，包含类似 background-image:url("javascript:..."); 的代码（新版本浏览器已经可以防范）。
    // 在 style 属性和标签中，包含类似 expression(...) 的 CSS 表达式代码（新版本浏览器已经可以防范）

    // 相关知识
    // 支持onload的标签
    // <body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
    // 支持onload的js对象
    // image, layer, window

    // 注意点
    // HTML 5 中指定不执行由 innerHTML 插入的 <script> 标签

    // 特殊符号的使用范围
    // < 和 > 是脚本执行和各种html标签需要的
    // & 和 # 以及 % 在对URL编码试图绕过XSS filter时，会出现
    // 所以输入的时候不要出现& < > " ' /等字符，如果出现将其过滤掉

    // js解决办法
    // 1从输入上过滤：过滤掉特殊字符
    // & -> &amp;
    // < -> &lt;
    // > -> &gt;
    // " -> &quot;
    // ' -> &#x27;
    // / -> &#x2F;
    function isSpecialCharacter (s) {
        let regEn = /[`~!@#$%^&*()_+<>?:"{}.\/;'[\]]/im
        let regCn = /[·！#￥（——）：；“”‘、|《。》？、【】[\]]/im

        if (regEn.test(s) || regCn.test(s)) {
            return true;
        } else {
            return false;
        }
    }

    // 2从使用上过滤：使用时避免使用innerHTML, outerHTML, document.write
    // 非要使用，也要讲特殊字符转义
    // 将onload、onerror、onclick的里的代码阻止

    // 3也可以让服务端设置httponly，让攻击者无法获取cookie
</script>
</body>
</html>
